<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form :inline="true" class="demo-form-inline" label-width="80px">
          <el-form-item label="标签名称">
            <el-input v-model="formData1.tags" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="formData1.province" placeholder="请选择" @change="areas">
              <el-option v-for="(item, index) in res.pro" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区">
            <el-select v-model="formData1.city" placeholder="请选择">
              <el-option v-for="(item, index) in res.city" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="formData1.shortName" placeholder></el-input>
          </el-form-item>
          <div>
            <el-form-item label="状态">
              <el-select v-model="formData1.state" placeholder="请选择">
                <el-option v-for="item in stateData" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="handleDetail">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getMannageList">搜索</el-button>
            </el-form-item>
            <!-- 新增用户按钮 -->
            <el-form-item class="addbtn">
              <el-button type="success" size="mini" icon="el-icon-edit" @click="dialogFormVisible = true">新增用户</el-button>
            </el-form-item>
            <el-alert :title="`共${page.total}条数据`" show-icon :closable="false" type="info"> </el-alert>
          </div>
        </el-form>
        <template>
          <div class="biaoge">
            <el-table :data="tableData">
              <el-table-column v-for="(item, index) in CompanyList" :key="index" :label="item.label" :prop="item.props"> </el-table-column>
              <el-table-column v-model="CompanyList" label="状态" prop="state" :formatter="formatterState"></el-table-column>
              <el-table-column label="操作" width="200px">
                <div slot-scope="{ row }">
                  <el-button type="primary" icon="el-icon-edit" @click="editBtn(row)" circle ></el-button>

                  <el-tooltip :content="row.state === 0 ? '启用' : '禁用'" placement="top">
                    <el-button :type="row.state === 0 ? 'success' : 'danger'" :icon="row.state === 0 ? 'el-icon-check' : 'el-icon-close'" @click="states(row)" circle></el-button
                  ></el-tooltip>
                  <el-button type="danger" icon="el-icon-delete" @click="removeBtn(row.id)" circle></el-button>
                </div>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pagesize"
                :total="page.total"
                layout=" prev, pager, next, sizes, jumper"
              >
              </el-pagination>
            </div>
          </div>
        </template>
      </el-card>
      <!-- 创建,添加用户弹窗 -->
      <div>
        <el-dialog :title="titleMap.close" :visible.sync="dialogFormVisible" :before-close="cancelBtn">
          <el-form :model="formData">
            <el-form-item label="企业名称" :label-width="formLabelWidth">
              <el-input v-model="formData.shortName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属公司" :label-width="formLabelWidth">
              <el-input v-model="formData.company" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="城市地区" :label-width="formLabelWidth">
              <el-select v-model="formData.province" placeholder="请选择" @change="Areas">
                <el-option v-for="(item, index) in res.pro" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              &nbsp;
              <el-select v-model="formData.city" placeholder="请选择">
                <el-option v-for="(item, index) in res.city" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向(企业标签)" :label-width="formLabelWidth">
              <el-input v-model="formData.tags" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formData.remarks"> </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="close">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 创建,添加用户弹窗 -->
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { list, add, remove, disabled, update } from '@/api/hmmm/companys'

export default {
  name: 'CompanysList',
  created () {
    this.getMannageList()
    this.res.pro = provinces()
  },
  data () {
    const res = {
      pro: [],
      city: []
    }
    return {
      titleMap: {
        close: '新增用户'
      },
      stateData: [
        { value: 1, label: '启用' },
        { value: 0, label: '禁用' }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formData: {
        isFamous: true, // 是否名企
        shortName: '', // 企业简称
        company: '', // 所属公司
        province: '', // 省份
        tags: '', // 标签
        city: '', // 城市
        remarks: '', // 备注
        state: null
      },
      formData1: {
        isFamous: true, // 是否名企
        shortName: '', // 企业简称
        company: '', // 所属公司
        province: '', // 省份
        tags: '', // 标签
        city: '', // 城市
        remarks: '', // 备注
        state: null
      },
      formLabelWidth: '120px',
      itemss: 0,
      Citys: {
        province: '',
        city: ''
      },
      tableData: [],
      CompanyList: [
        { label: '序号', props: 'id' },
        { label: '企业编号', props: 'number' },
        { label: '企业简称', props: 'shortName' },
        { label: '标签', props: 'tags' },
        { label: '创建者', props: 'creatorID' },
        { label: '创建日期', props: 'addDate' },
        { label: '备注', props: 'remarks' }
      ],
      counts: '',
      page: {
        pagesize: 10,
        page: 1,
        total: 0
      },
      currentPage: 1,
      textarea: '',
      items: '',
      id: '',
      res,
      roleForm: {}
    }
  },
  methods: {
    handleDetail () {
      console.log('清除')
      this.formData1 = {
        isFamous: true, // 是否名企
        shortName: '', // 企业简称
        company: '', // 所属公司
        province: '', // 省份
        tags: '', // 标签
        city: '', // 城市
        remarks: '', // 备注
        state: null
      }
    },
    handleSearch () {
      console.log('搜索')
    },
    // handleAdd () {
    //   console.log('添加用户')
    // },
    async getMannageList () {
      // this.page.page = this.currentPage
      // console.log(this.page)
      const data = await list({ ...this.formData1, ...this.page })
      console.log(data)
      this.company = data.data.items
      // console.log(this.company)
      this.tableData = data.data.items
      this.page.total = data.data.counts
    },
    // 添加用户
    async addCompany (id) {
      const res = await add({ id })
      console.log(res)
    },
    // 删除用户
    async removeCompany (id) {
      const res = await remove({ id })
      console.log(res)
    },
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getMannageList()
    },
    handleCurrentChange (newpage) {
      // console.log(`当前页: ${val}`)
      // this.currentPage = newpage
      this.page.page = newpage
      console.log(newpage)
      this.getMannageList()
    },
    // 选中城市后选择地区
    areas () {
      this.res.city = citys(this.formData1.province)
    },
    Areas (val) {
      console.log(val)
      this.formData.province = val
      this.res.city = citys(this.formData.province)
    },
    async close () {
      if (this.formData.id) {
        delete this.formData.username
        if (this.formData.isFamous === 1) {
          this.formData.isFamous = true
        } else {
          this.formData.isFamous = false
        }
        update(this.formData)
        this.dialogFormVisible = false
        this.formData = {
          isFamous: true, // 是否名企
          shortName: '', // 企业简称
          company: '', // 所属公司
          province: '', // 省份
          tags: '', // 标签
          city: '', // 城市
          remarks: '' // 备注
        }
        // this.
      } else {
        this.dialogFormVisible = false
        console.log(this.formData)
        this.formData1.city = this.Citys.city
        this.formData1.province = this.Citys.province
        const res = await add(this.formData)
        console.log(res)
        this.getMannageList()
        this.cancelBtn()
      }
    },
    // 删除用户
    async removeBtn (id) {
      console.log(id)
      await this.$confirm('确认删除该公司吗?')
      this.removeCompany(id)
      this.getMannageList()
    },
    // 取消按钮(清空)
    cancelBtn () {
      this.dialogFormVisible = false
      this.formData = {
        isFamous: true, // 是否名企
        shortName: '', // 企业简称
        company: '', // 所属公司
        province: '', // 省份
        tags: '', // 标签
        city: '', // 城市
        remarks: '' // 备注
      }
    },
    // 编辑用户
    async editBtn (e) {
      // const res = await update({ id })
      // console.log(res)
      this.titleMap.close = '编辑用户'
      this.dialogFormVisible = true
      console.log(e)
      this.formData = e
    },
    formatterState (row) {
      return row.state === 0 ? '禁用' : '启用'
    },
    // 判断状态(启用/禁用)
    async states (row) {
      console.log(row)

      if (row.state === 0) {
        row.state = 1
        this.$message({
          message: '已成功启用',
          type: 'success'
        })
      } else {
        row.state = 0
        this.$message({
          message: '已成功禁用',
          type: 'success'
        })
      }
      const res = await disabled({ id: row.id, state: row.state })
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
 ::v-deep .el-card__body {
    padding-bottom: 60px;
  }
  .addbtn {
    position: absolute;
    right: 60px;
  }
  ::v-deep .el-input__inner {
    width: 320px;
  }
}
.block {
  margin-top: 10px;
  position: absolute;
  right: 100px;
  ::v-deep .el-input__inner {
    width: 100px;
  }
}
.biaoge {
  padding-top: 30px;
}
</style>
